import { useEffect, useLayoutEffect } from "react";
import { useGLTF } from "@react-three/drei";
import { RigidBody } from "@react-three/rapier";

useGLTF.preload("./island/SM_Islands_01.gltf");

export default ({ log = false }) => {
  /*----------------------------变量命名------------------------------*/
  // 加载模型
  const land: any = useGLTF("./land/SM_Landscape_MG01.gltf"); // 地面
  const island: any = useGLTF("./island/SM_Islands_01.gltf"); // 岛屿建筑
  /*----------------------------生命周期-------------------------------*/
  // dom更新后渲染前
  useLayoutEffect(() => {
    openShadow();
  }, []);
  // dom渲染到屏幕后
  useEffect(() => {
    if (log) {
      console.log("land", land);
      console.log("island", island);
    }
  }, []);

  // 打开阴影
  function openShadow() {
    land.scene.traverse(
      (obj) => obj.isMesh && (obj.receiveShadow = obj.castShadow = true)
    );
    island.scene.traverse(
      (obj) => obj.isMesh && (obj.receiveShadow = obj.castShadow = true)
    );
  }
  return (
    <group dispose={null}>
      <RigidBody
        name="环境"
        type="fixed"
        colliders="trimesh"
        position={[-20, -10, 80]}
      >
        <primitive object={land.scene} />
        <primitive object={island.scene} />
        {/* <mesh position={[20, 4.5, -100]} rotation-x={-Math.PI / 2}>
          <planeGeometry args={[500, 500]} />
          <meshStandardMaterial color="skyblue" />
        </mesh> */}
      </RigidBody>
    </group>
  );
};
